<html>
<head>
<title>XKCD rocks!</title>
</head>

<body>
  <img src="" id="xkcd">
  </src>

<div>
  All comics from <a href="http://xkcd.com">xkcd</a>. It rocks!
</div>
</body>

</html>

<script language="javascript">
function loadJSON(url, callback) {   

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
	xobj.open('GET', url, true);
	xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            callback(xobj.responseText);
          }
    };
    xobj.send(null);  
 }

var base_url = "/xkcd/info.0.json";
loadJSON(base_url, function(json_data) {
  var MAX = JSON.parse(json_data).num;
  var id = Math.floor(Math.random() * MAX) + 1;

  var url = "/xkcd/" + id + "/info.0.json";
  loadJSON(url, function(json_data) {
    var data = JSON.parse(json_data);
    var img = data.img.split("/").pop();
    document.getElementById("xkcd").src = "/img/xkcd/comics/" + img;
  });
});
</script>
